import React,{Component} from "react";
import { Carousel } from 'antd';

export default class Icons extends Component{
    constructor(){
        super();
    }

    render(){
        let {isShow} = this.props;
        let showClass = isShow ? "show" : "hidden";
        return (
            <section className={`${showClass} icons`}>
                <Carousel autoplay dots="false">
                    <div className="scroll">
                        <div id="Python"><embed src="svg/python1.svg" width="240" height="270" type="image/svg+xml" /><span>Python</span></div>
                        <div id="HTML5"><embed src="svg/H5.svg" width="240" height="270" type="image/svg+xml" /><span>HTML5</span></div>
                        <div id="Nginx"><embed src="svg/N.svg" width="240" height="270" type="image/svg+xml" /><span>Nginx</span></div>
                        <div id="CSS"><embed src="svg/CSS3.svg" width="240" height="270" type="image/svg+xml" /><span>CSS</span></div>
                        <div id="JavaScript"><embed src="svg/js.svg" width="240" height="270" type="image/svg+xml" /><span>JavaScript</span></div>
                    </div>
                    <div className="scroll">
                        <div id="JavaScript"><embed src="svg/js.svg" width="240" height="270" type="image/svg+xml" /><span>JavaScript</span></div>
                        <div id="CSS"><embed src="svg/CSS3.svg" width="240" height="270" type="image/svg+xml" /><span>CSS</span></div>
                        <div id="Nginx"><embed src="svg/N.svg" width="240" height="270" type="image/svg+xml" /><span>Nginx</span></div>
                        <div id="Python"><embed src="svg/python1.svg" width="240" height="270" type="image/svg+xml" /><span>Python</span></div>
                        <div id="HTML5"><embed src="svg/H5.svg" width="240" height="270" type="image/svg+xml" /><span>HTML5</span></div>
                    </div>
                </Carousel>
            </section>
        )
    }
}